<template>
  <div>
      <div class="h1">
          <h1>收货地址</h1>
      </div>
      <div class="h4">
          <h4>新增收货地址</h4>
      </div>
      <div class="top">
            <el-form ref="form" :model="form" label-width="90px">
                <span>当前配送至：中国大陆</span>
                <el-form-item label="地址信息">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="详细地址">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="邮政编码">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="收货人姓名">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary">保存</el-button>
                </el-form-item>
            </el-form>
      </div>
      <div class="bottom">
          <table>
              <thead>
                  <tr>
                     <td>收货人</td>
                     <td>所在地区</td>
                     <td>详细地址</td>
                     <td>邮箱</td>
                     <td>联系电话</td>
                     <td>操作</td> 
                  </tr>
              </thead>
              <tbody>
                  <tr>
                      <td>小雨</td>
                      <td>河北省石家庄市新华区</td>
                      <td>河北省石家庄市新华区中山路东方大厦</td>
                      <td>050021</td>
                      <td>13345678910</td>
                      <td>
                          <el-button type="primary" icon="el-icon-edit" circle></el-button>
                          <el-button type="danger" icon="el-icon-delete" circle></el-button>
                      </td>
                  </tr>
              </tbody>
          </table>
      </div>
  </div>
</template>

<script>
export default {
    data() {
      return {
        form: {
          name: '',
        }
      }
    },
}
</script>
<style scoped src="../../assets/css/index.css"></style>
<style>
.h1 {
    background-color: rgb(247, 194, 168);
    display: block;
    padding: 10px;
    font-size: 12px;
}
.h4 {
    padding: 10px;
    color: coral;
}
.top {
    padding: 10px;
}
.top .el-form-item {
    margin-top: 10px;
}
.top button {
    width: 50px;
    height: 30px;
}
</style>